﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>购物车</title>
    <style>
        .order{
            width:60%;
            padding:0 20%;
        }
        
        .step{
            width:100%;
            height:60px;
        }
        .el-step__title.is-process,.is-text {
            color: #0c8ed9;
        }
        .el-step__head.is-process {
            border-color: #0c8ed9;
        }
         .header{
            width:100%;
            height:50px;
            line-height:50px;
            background-color: #fbfbfd;
            color: #999;
            font-size:15px;
        }
        .on {
            background-color: #fbfbfd;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--顶部-->
        <div class="top">
            <el-row>
                <el-col :span="5">
                    <div>
                        <img src="~/Content/imgs/logo.png" style="height: 37px; width: 135px;" />
                    </div>
                </el-col>
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="search">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor:pointer;" v-on:click="searchKey"></i>
                    </el-input>
                </el-col>
                <el-col :span="12">
                    <div class="top_item">
                        <a href="javascript:;">注册/登录<i class="el-icon-user"></i></a>
                        <a href="javascript:;">播放记录<i class="el-icon-time"></i></a>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--导航-->
        <div class="navi">
            <a href="/Home/Index">首页</a>
            <a href="/Music/MusicType">分类</a>
            <a href="/Music/NewCd">新碟</a>
            <a href="/Music/Singer">歌手</a>
            <a href="/Music/MusicRank">排行榜</a>
            <a href="/Music/RecomMusic">推荐歌单</a>
        </div>
        <div class="order">
            <div class="step">
                <div class="elStep">
                    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
                        <el-step title="1. 我的购物车"></el-step>
                        <el-step title="2. 核对购物信息"></el-step>
                        <el-step title="3. 提交订单成功"></el-step>
                    </el-steps>
                </div>
            </div>
            <div v-if="active==1">
                <el-table :data="tableData" style="width: 100%;font-size:14px;">
                    <el-table-column type="index" label="序号" width="60"> </el-table-column>
                    <el-table-column prop="musciName" label="歌曲名"></el-table-column>
                    <el-table-column prop="musicPeo" label="歌手"></el-table-column>
                    <el-table-column prop="musicTime" label="时长"></el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="height:60px; line-height:60px;">
                    共<span style="color:red;">1</span>张碟，时长<span style="color:red;">{{totalTime}}</span> <span style="color:#0c8ed9;">&nbsp; 注：时长超过70分钟将不能被刻录 </span><el-button :disabled="Buydisabled" type="primary" style="float:right;margin-right:10%;margin-top:10px" v-on:click="next">选择好了，核对订单</el-button>
                </div>
            </div>
            <div v-if="active==2">
                <el-row class="header">
                    <el-col :span="3" style="text-align:center">序号</el-col>
                    <el-col :span="6" style="text-align:center">歌名</el-col>
                    <el-col :span="6" style="text-align:center">歌手</el-col>
                    <el-col :span="6" style="text-align:center">时长</el-col>
                    <el-col :span="3" style="text-align:center">品质</el-col>
                </el-row>
                <el-row v-for="(item,index) in tableData" style="width:100%;height:40px;line-height:40px;font-size:13px" :class="{on:index%2!=0}">
                    <el-col :span="3" style="text-align:center">{{index+1}}</el-col>
                    <el-col :span="6" style="text-align:center">{{item.musciName}}</el-col>
                    <el-col :span="6" style="text-align:center">{{item.musicPeo}}</el-col>
                    <el-col :span="6" style="text-align:center">{{item.musicTime}}</el-col>
                    <el-col :span="3" style="text-align:center">{{item.musicPz}}</el-col>
                </el-row>
                <div style="height:60px; line-height:60px;">
                    <el-button style="margin-right:20px;margin-top:10px" v-on:click="prev" v-if="active==2">上一步</el-button>
                    <el-button :disabled="Buydisabled" type="primary" style="float:right;margin-right:10%;margin-top:10px" v-on:click="next">提交订单</el-button>
                </div>
            </div>
            <div v-if="active==3" style="height:40%;">
                <img src="~/Content/imgs/duihao.png" style="vertical-align:middle">
                提交成功,联系客服完成订单
                <p><el-button typeo="primary">返回到首页，继续选择</el-button></p>
            </div>
        </div>
        <!--底部-->
        <footer class="el-footer-css">
            <div> <a hidefocus="true">关于我们</a>| <a hidefocus="true">监督举报</a> | <a hidefocus="true">广告服务</a> | <a hidefocus="true">投诉指引</a> | <a>隐私政策</a> | <a>儿童隐私政策</a> | <a hidefocus="true">用户服务协议</a>  |  <a hidefocus="true">招聘信息</a> | <a hidefocus="true">客服中心</a> | <a hidefocus="true">用户体验提升计划</a></div>
        </footer>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    search: '',
                    Carcount: 18,
                    active: 1,
                    tableData: [
                         {
                              musciName: '火苗',
                              musicPeo: '苏晗',
                              musicTime: '00:11',
                              musicPz  :'SQ'   
                         },
                         {
                              musciName: '美丽女人',
                              musicPeo: '程响',
                             musicTime: '03:55',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '很久以后',
                              musicPeo: 'G.E.M. 邓紫棋',
                             musicTime: '04:50',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '口是心非',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '03:23',
                              musicPz  :'SQ'   

                         },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                        },
                         {
                              musciName: '让我欢喜让我忧',
                              musicPeo: '杨小壮 / 鹏鹏',
                             musicTime: '04:00',
                              musicPz  :'SQ'   

                         },
                         {
                             musciName: '只要平凡',
                             musicPeo: '张杰 / 张碧晨',
                             musicTime: '04:06',
                              musicPz  :'SQ'   

                         } 
                    ],
                    totalTime: 0,
                    Carcount: 0,
                    Buydisabled: true,
                }
            },
            methods: {
                 next() {
                    if (this.active++ > 2) this.active = 0;
                },
                prev() {
                    --this.active;                    
                },
                 searchKey() {
                    if (this.search == '' || this.search == null) {
                      
                    } else {
                        location.href = '/Home/SearchMusic?keyWord=' + this.search
                    }
                }
            },
            mounted() {  
                var min = 0;
                var sec = 0;
                for (var i = 0; i < this.tableData.length; i++) {
                    min += parseInt(this.tableData[i].musicTime);   
                    sec += parseInt(this.tableData[i].musicTime.substring(3));
                }
                var oth = parseInt(sec / 60);
                var sec = sec % 60;
                min += oth;
                if (sec < 10) {
                    sec = "0" + sec;
                }
                this.totalTime = min + ':' + sec;
                this.Carcount = this.tableData.length;
            },
            watch: {
                totalTime: {
                    handler(newValue) {
                        var value = parseInt(newValue);
                        if (value > 0 && value< 70) {
                            this.Buydisabled = false;
                        } else {
                            this.Buydisabled = true;
                        }                      
                    } ,deep: true
                }
            }
        })
    </script>
</body>
</html>
